<script setup lang="ts">
import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed({
  get(){
    return `${firstName.value}-${lastName.value}`
  },
  set(value){
    const names = value.split('-')
    firstName.value = names[0]
    lastName.value = names[1]
  }
})

</script>


<template>
  <div id="app">
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    <input type="text" v-model="fullName">
  </div>
</template>

<style>
table {
  border: 1px solid #000;
  text-align: center;
  width: 240px;
}

th,
td {
  border: 1px solid #000;
}

h3 {
  position: relative;
}
</style>
